import React, { useEffect, useState } from 'react';
import { NavBar, Image, Loading, Empty, List } from 'react-vant';
import { useParams } from 'react-router-dom';
import axios from '../../request/axios';

interface EvaluateItem {
    nickName: string;
    headPic: string;
    content: string;
    commentTime: number;
}

const formatTime = (timestamp: number) => {
    const date = new Date(timestamp);
    // 可根据需要格式化为“5小时前”、“星期三”或“YYYY.MM.DD”
    // 这里只做简单日期
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    });
};

const DoctorEvaluateList: React.FC = () => {
    const { doctorId } = useParams<{ doctorId: string }>();
    const [list, setList] = useState<EvaluateItem[]>([]);
    const [page, setPage] = useState(1);
    const [finished, setFinished] = useState(false);
    const [loading, setLoading] = useState(false);

    const fetchList = async (pageNum = 1, isRefresh = false) => {
        if (!doctorId) {
            console.log('doctorId is missing');
            return;
        }
        setLoading(true);
        try {
            const res = await axios.get('/health/user/inquiry/v1/findDoctorEvaluateList', {
                params: { doctorId, page: pageNum, count: 5 }
            });
            console.log('接口返回:', res.data);
            if (res.data.status === '0000') {
                const data = res.data.result || [];
                if (isRefresh) {
                    setList(data);
                } else {
                    setList(prev => [...prev, ...data]);
                }
                setFinished(data.length < 5);
            } else {
                console.log('接口状态非0000:', res.data.message);
            }
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchList(1, true);
    }, [doctorId]);

    return (
        <div>
            <NavBar title="评论列表" leftText="返回" onClickLeft={() => window.history.back()} />
            <List
                loading={loading}
                finished={finished}
                onLoad={() => {
                    if (!finished) {
                        const nextPage = page + 1;
                        setPage(nextPage);
                        fetchList(nextPage);
                    }
                }}
            >
                {list.length === 0 && !loading ? (
                    <Empty description="暂无评论" />
                ) : (
                    list.map((item, idx) => (
                        <div key={idx} style={{ display: 'flex', padding: 16, borderBottom: '1px solid #f5f5f5' }}>
                            <Image src={item.headPic} width={48} height={48} round style={{ marginRight: 12 }} />
                            <div style={{ flex: 1 }}>
                                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                                    <span style={{ fontWeight: 500 }}>{item.nickName}</span>
                                    <span style={{ color: '#999', fontSize: 12 }}>{formatTime(item.commentTime)}</span>
                                </div>
                                <div style={{ color: '#333', fontSize: 14 }}>{item.content}</div>
                            </div>
                        </div>
                    ))
                )}
            </List>
        </div>
    );
};

export default DoctorEvaluateList;